<template>
  <div id="fotuser" class="useWater" ref="outdiv">
    <div id="useWatermain" class="useWatermain-main"></div>
  </div>
</template>

<script>
const echarts = require('echarts')
import { flUseWaterYearWideTable } from '@/api/baseManage/flMaintain/index'
export default {
  name: 'ecahrtsM',
  props: ['viewHeight', 'viewWidth'],
  data() {
    return {
      echarts: '',
      waterData: [],
      shopCharts: null,
      fullMonth: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      tempMonth: [
        new Date().getFullYear() + '-01',
        new Date().getFullYear() + '-03',
        new Date().getFullYear() + '-04',
        new Date().getFullYear() + '-02',
        new Date().getFullYear() + '-05',
        new Date().getFullYear() + '-06',
        new Date().getFullYear() + '-07',
        new Date().getFullYear() + '-08',
        new Date().getFullYear() + '-09',
        new Date().getFullYear() + '-10',
        new Date().getFullYear() + '-11',
        new Date().getFullYear() + '-12',
      ],
    }
  },
  methods: {
    //改变div的长和宽
    changeHeightWidth(i, x, y, height, width) {
      let useWatermain = document.getElementById('useWatermain')
      useWatermain.style.height = height - 10 + 'px'
      useWatermain.style.width = width + 100 + 'px'
      useWatermain.style.marginLeft = -50 + 'px'
      this.shopCharts = this.$echarts.init(useWatermain)
      this.shopCharts.resize()
      // this.createEcharts()
      // this.getWaterData()
    },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(document.getElementById('useWatermain'))

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'item',
        },
        toolbox: {
          // show: true,
          // 各工具配置项。
          // feature: {
          //     dataView: {readOnly: false},
          //     restore: {},
          //     saveAsImage: {}
          // }
          feature: {
            // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            // dataView: {show: true, readOnly: false},
            // 动态类型切换 'line'（切换为折线图） 'bar'（切换为柱状图）
            // magicType: {show: true, type: ['line', 'bar']},
            // 开启配置项还原
            // restore: {show: true},
          },
        },
        legend: {
          // data: ["水量", "平均温度"],
          // data:[]
        },
        xAxis: [
          {
            // 坐标轴类型
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
            axisPointer: {
              // 阴影指示器
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            //  数值轴，适用于连续数据。
            type: 'value',
            name: '水量(十万方)',
            min: 0,
            max: 'dataMax',
            // 强制设置坐标轴分割间隔
            interval: 300,
            axisLabel: {
              formatter: '{value}',
            },
          },
          {
            type: 'value',
            name: '',
            min: 0,
            max: 'dataMax',
            interval: 300,
            axisLabel: {
              formatter: '',
            },
          },
        ],
        series: [
          {
            // name: '水量',
            // 格式  'line'（切换为折线图） 'bar'（切换为柱状图）
            type: 'bar',
            // showBackground: true,
            data: this.waterData,
          },
          {
            name: '',
            type: 'line',
            yAxisIndex: 1,
            data: this.waterData,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(option)
      window.addEventListener('resize', () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.shopCharts.resize()
        console.log('----=-', '用水分析')
        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      })
    },
    // 获取柱状图水量
    async getWaterData(call) {
      const res = await flUseWaterYearWideTable()
      this.waterData = res.data
      let maxNumber = Math.max(...this.waterData.map((item) => item.useCount))
      let interval =
        maxNumber <= 10000
          ? 5000
          : maxNumber >= 10000 && maxNumber <= 500000
          ? 20000
          : maxNumber > 500000 && maxNumber <= 1000000
          ? 50000
          : maxNumber > 500000 && maxNumber <= 2000000
          ? 100000
          : maxNumber > 2000000 && maxNumber <= 5000000
          ? 200000
          : 500000
      // console.log('#########################', this.waterData) || this.waterData
      let waterDa = []
      let xmData = []
      for (let i = 0; i < this.waterData['length']; i++) {
        let list = JSON.stringify(this.waterData[i]['useCount'])
        waterDa.push(list)
        xmData.push(this.waterData[i]['useMonth'])
      }
      let newWaterData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      xmData.forEach((item, index) => {
        this.tempMonth.forEach((v, i) => {
          if (item == v) {
            newWaterData[i] = waterDa[index]
          }
        })
      })

      this.echarts.setOption({
        tooltip: {
          trigger: 'item',
        },
        xAxis: [
          {
            type: 'category',
            data: this.fullMonth,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '万方',
            min: 0,
            // max: 1000000000,
            interval,
            // interval: 'auto',
            axisLabel: {
              formatter: '{value}',
            },
          },
        ],
        series: [
          {
            type: 'bar',
            data: newWaterData,
            itemStyle: {
              normal: {
                color: '#0B9AC3',
              },
            },
          },
          /* {
            name: '',
            type: 'line',
            yAxisIndex: 50000,
            data: newWaterData,
            itemStyle: {
              normal: {
                color: '#000',
              },
            },
          }, */
        ],
      })
      call && call()
    },
  },
  mounted() {
    console.log('原高度：')
    // let fotuser = document.getElementById("fotuser");
    /*   let Fheight = this.viewHeight * 35 + 'px'
    let Fwidth = this.viewWidth * 110 + 'px' */

    // let useWatermain = document.getElementById('useWatermain')
    /*
    useWatermain.style.height = Fheight
    useWatermain.style.width = Fwidth */
    // this.shopCharts = this.$echarts.init(useWatermain)

    // this.shopCharts.resize()
    this.createEcharts()
    this.getWaterData(() => {
      let width =
        document.querySelector('.useWater').parentNode.parentNode.parentNode
          .style.width
      let height =
        document.querySelector('.useWater').parentNode.parentNode.parentNode
          .clientHeight
      console.info(
        'width--用水分析',
        width.split('p')[0],
        'height--用水分析',
        height
      )
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
    })
  },
  beforeDestroy() {
    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦*/
    window.removeEventListener('resize', () => {
      this.shopCharts.resize()
    })
  },
}
</script>

<style>
.useWatermain-main {
  width: 320px;
  height: 220px;
}
</style>
